import router from '@/router'
import nProgress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store'
// 引入动态路由
import {asyncRoutes} from '@/router'


/**
 * 前置守卫
 */

// 有些页面不需要token也能访问，我们称之为白名单，将这些页面的路径一般存放到一个数组中
const whiteList=['/login','/404']

router.beforeEach(async (to,from,next)=>{
  nProgress.start()//开启进度条
  if(store.getters.token){
    // 存在token
    if(to.path==='/login'){
      // 在登录状态下想继续登录则跳转到主页
      next('/')
      // 注意：next()中有地址时，路由后置守卫不执行需要手动关闭
      nProgress.done()
    }else{
      // 判断是否获取过资料
      if(!store.getters.userId){
        // 获取该登录用户的已有权限数据
        const {roles:{menus}}=await store.dispatch('user/getUserInfo')
        //menus: 是一个数组--不同用户登录返回的权限数据不同
        // console.log(menus);

        //asyncRoutes:是一个数组--动态路由的全部数据，后续会根据menus中权限数据与其作比较，有几个相同就能访问对应的页面
        // console.log(asyncRoutes);

        const filterRouters=asyncRoutes.filter((item)=>{
          // 检查menus中的元素是否包含item.meta.permission,如果包含就为true，将包含的路由数据以数组形式进行返回
          return menus.includes(item.meta.permission)
        })
        // console.log(filterRouters);
        // 将筛选好的动态路由提交到store，实现数据的实时更新响应化，方便做页面渲染
        store.commit('user/setRoutes',filterRouters)

        // 将筛选后的路由追加到总路由文件中（就是在原有的静态路由数据后面进行追加，方便默认显示）
        // 注意：在原有的静态路由中，'/404'路由应该放到最后，所以我们应该将原有静态路由中的'/404'删除，先追加filterRouters，再追加'/404'，这样路由数组元素中最后一个数据就是'/404'了

        router.addRoutes([...asyncRoutes,{ path: '*', redirect: '/404', hidden: true }])

        // router添加动态路由后，需要再转发一下
        next(to.path)//目的是让路由拥有信息  vue2中router的已知缺陷
      }else{

        next()//直接放过
      }
    }
  }else{
    // 没有token
    if(whiteList.includes(to.path)){
      // 没有token时进入白名单中页面时放行
      next()
    }else{
      // 中转到登录页
      next('/login')
      nProgress.done()
    }
    
  }

  
})



/**
 * 后置守卫
 */
router.afterEach(()=>{
  nProgress.done()//关闭进度条


})
